<template>
  <div class="customer-register-user">
    <gl-breadcrumb class="mb15"
                   :text="type?'产品中心,激活设备':'客户管理,客户详情,激活设备'"></gl-breadcrumb>

    <div class="table p20">
      <div class="title">
        <div class="name">{{$route.query.name}}</div>
        <div class="search flex mt10">
          <div class="total">限制机器总数：{{sum}}</div>
          <div class="ml25">已激活设备：{{act_sum}}</div>

        </div>
      </div>
      <gl-table v-loading="loading"
                class="p20"
                :data="list"
                @button="buttonClick"
                :columns="listLabel"></gl-table>
      <gl-pagination :curr="curr"
                     :size="limits"
                     :total="total"
                     @callback="getList"></gl-pagination>
      <!-- <Gldelbtn :show="showDel"
                @cancel="closeDel"
                @determine="determine"></Gldelbtn> -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'CustomerRegisterDevice',
  data() {
    return {
      loading: true,
      //   showDel: false,
      type: '',
      dialogText: '',
      sum: '',
      act_sum: '',
      id: '',
      deviceId: '',
      total: 0,
      limits: 10,
      curr: 1,

      list: [],
      listLabel: [
        { label: '设备ID', prop: 'id' },
        { label: '设备标识号', prop: 'device_udid' },
        { label: '绑定序列号', prop: 'active_code' },
        { label: '绑定用户', prop: 'bind_user' },
        { label: '上次登录时间', prop: 'area' },
        { label: '上次登录区域', prop: 'last_time' },
        { label: '操作', btns: ['恢复出厂'] }
      ]
    }
  },
  created() {
    // console.log(this.$route)
    this.type = this.$route.query.type
    this.id = this.$route.query.id
    this.sum = this.$route.query.sum
    this.act_sum = this.$route.query.act_sum
    this.getList()
  },
  methods: {
    // closeDel() {
    //   this.showDel = false
    // },
    // determine(code, Vcode) {
    //     console.log(code);
    //     console.log(Vcode);
    //   if (code === Vcode) {
    //     this.delDevice(this.deviceId)
    //   } else {
    //     this.$message.error('验证码错误，请重新输入')
    //   }
    // },
    getList(obj) {
      if (obj) {
        this.curr = obj.curr
        this.limits = obj.size
      } else {
        this.curr = 1
        this.limits = 10
      }
      this.http
        .$post('admin/device.Api/lists', {
          product_id: this.id,
          curr: this.curr,
          limits: this.limits
        })
        .then(r => {
          //   console.log(r)
          this.list = r.list
          this.total = r.total
          this.loading = false
        })
        .catch(this.$err)
    },
    buttonClick(item) {
      //   console.log(item)
      this.deviceId = item.row.id
      if (item.index == 0) {
        this.$confirm('此操作将恢复出厂设置, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.recoveryDevice(this.deviceId)
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消恢复设置'
            })
          })
      }
      //    else {
      //     this.showDel = true
      //   }
    },
    delDevice(id) {
      this.http
        .$post('admin/device.Api/device_del', {
          model_id: id,
          status: 2
        })
        .then(r => {
          //   console.log(r)
          this.getList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(this.$err)
    },
    recoveryDevice(id) {
      this.http
        .$post('robot/contact.api/restore_factory_settings', {
          watch_id: id
        })
        .then(r => {
          //   console.log(r)
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
        })
        .catch(this.$err)
    }
  }
}
</script>

<style scoped lang="less">
.table {
  background-color: #fff;
  .search {
    align-items: center;
  }
  .name {
    font-size: 22px;
    font-weight: bold;
    color: #333;
  }
}
</style>